<template>
  <div class="userSetting_Main">
    <div class="headnavigation">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>系统设置</el-breadcrumb-item>
        <el-breadcrumb-item class="currentPage">角色管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <main class="table_contnt">
      <p>
        <button>新增</button>
        <button>删除</button>
      </p>
      <div class="tableMain">
        <el-table
          ref="multipleTable"
          :data="arr_tableData"
          tooltip-effect="dark"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" min-width="10%"></el-table-column>
          <el-table-column label="编号" type="index" width="60%"></el-table-column>
          <el-table-column label="角色名称" min-width="30%">
            <template slot-scope="scope">{{ scope.row.s_position }}</template>
          </el-table-column>
          <el-table-column prop="s_roleAuthorization" label="角色权限" min-width="50%"></el-table-column>
          <el-table-column prop="s_roleNews" label="角色描述" show-overflow-tooltip></el-table-column>
          <el-table-column label="操作" min-width="35%">
            <template slot-scope="scope">
              <el-button
                size="mini"
                class="editButton"
                @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button>
              <el-button
                class="deleteBtn"
                size="mini"
                @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 编辑事件弹窗 -->
      <el-dialog
        title="添加角色信息"
        :visible.sync="b_editDialogVisible"
        class="editDialogVisible"
        width="30%"
        center="true">
        <form>
          <div>
            <label for="userName">
              角色名称:
              <input type="text" id="userName" />
            </label>
          </div>
          <div>
            <label>
              角色权限:
              <el-select v-model="s_deparment">
                <el-option
                  v-for="item in obj_returnRemoteData.arr_position"
                  :key="item"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </label>
          </div>
          <div>
            <label for="userNews">
              角色描述:
              <textarea id="userNews"></textarea>
            </label>
          </div>
          <div class="editDialogButton">
            <button @click.prevent="b_editDialogVisible = false">保 存</button>
            <button @click.prevent="b_editDialogVisible = false">取 消</button>
          </div>
        </form>
      </el-dialog>
      <!-- 删除事件弹窗 -->
      <el-dialog
        title="批量删除"
        :visible.sync="d_editDialogVisible"
        class="editDialogVisible"
        width="20%"
        center="true">
        <form>
          <div class="photo">
            <img
              style="width: 18px;height: 18px;background: #FA504B;border-radius: 50%;"
              src="../../assets/监测预警@3x.png"
              alt
            />
            <p style="font-size: 18px;">是否确定删除“巡警”等2位角色</p>
          </div>
          <div class="deleteDialogButton">
            <button class="delete" @click.prevent="d_editDialogVisible = false">删 除</button>
            <button class="cancel" @click.prevent="d_editDialogVisible = false">取 消</button>
          </div>
        </form>
      </el-dialog>
    </main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr_tableData: [
        {
          s_position: "超级管理员",
          s_roleAuthorization: "角色权限",
          s_roleNews: "角色描述"
        },
        {
          s_position: "管理员",
          s_roleAuthorization: "角色权限",
          s_roleNews: "角色描述"
        },
        {
          s_position: "民警",
          s_roleAuthorization: "角色权限",
          s_roleNews: "角色描述"
        },
        {
          s_position: "辅警",
          s_roleAuthorization: "角色权限",
          s_roleNews: "角色描述"
        }
      ],
      // 编辑事件
      b_editDialogVisible: false,
      // 删除事件
      d_editDialogVisible: false,
      //编辑角色下拉列表角色权限数据
      s_deparment: "",
      obj_returnRemoteData: {
        arr_position: ["指令流转", "指令流转1", "指令流转2"]
      }
    };
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleEdit(index, row) {
      this.b_editDialogVisible = true;
      console.log(index, row);
    },
    handleDelete(index, row) {
      this.d_editDialogVisible = true;
      console.log(index, row);
    }
  }
};
</script>

<style lang="scss" >
@import "../../assets/sass/systemSass/userSetting.scss";
</style>